<template>
  <div class="lawyer-case-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-button @click="goBack" size="small" class="back-button">
            <i class="fas fa-arrow-left mr-2"></i>返回
          </el-button>
          <h1 class="page-title">
            <i class="fas fa-user-tie mr-3"></i>{{ lawyerName }} - 案件列表
          </h1>
          <p class="page-description">
            查看律师的所有案件信息，支持按状态筛选和详细管理
          </p>
        </div>
        <div class="header-actions">
          <el-button @click="refreshData">
            <i class="fas fa-sync mr-2"></i>刷新
          </el-button>
          <el-button @click="exportCases">
            <i class="fas fa-file-export mr-2"></i>导出
          </el-button>
          <el-button type="primary" @click="assignNewCase">
            <i class="fas fa-plus mr-2"></i>分配新案件
          </el-button>
        </div>
      </div>
    </div>

    <!-- 律师信息卡片 -->
    <div class="lawyer-info-card">
      <div class="lawyer-basic-info">
        <el-avatar :size="80" :src="lawyerInfo.avatar" class="lawyer-avatar">
          {{ lawyerInfo.name?.charAt(0) }}
        </el-avatar>
        <div class="lawyer-details">
          <h2 class="lawyer-name">{{ lawyerInfo.name }}</h2>
          <div class="lawyer-meta">
            <span class="lawyer-title">{{ lawyerInfo.title }}</span>
            <span class="department-badge" :class="getDepartmentClass(lawyerInfo.department)">
              {{ getDepartmentText(lawyerInfo.department) }}
            </span>
          </div>
          <div class="lawyer-stats">
            <span class="stat-item">执业年限: {{ lawyerInfo.practiceYears }}年</span>
            <span class="stat-item">专长领域: {{ lawyerInfo.specialties?.join('、') }}</span>
          </div>
        </div>
      </div>
      
      <div class="case-stats-grid">
        <div class="stat-item">
          <div class="stat-number" :class="{ active: statusFilter === 'all' }">{{ lawyerInfo.totalCases }}</div>
          <div class="stat-label">总案件数</div>
        </div>
        <div class="stat-item">
          <div class="stat-number active" :class="{ active: statusFilter === 'active' }">{{ lawyerInfo.activeCases }}</div>
          <div class="stat-label">在办案件</div>
        </div>
        <div class="stat-item">
          <div class="stat-number completed" :class="{ active: statusFilter === 'completed' }">{{ lawyerInfo.completedCases }}</div>
          <div class="stat-label">已结案件</div>
        </div>
        <div class="stat-item">
          <div class="stat-number pending" :class="{ active: statusFilter === 'pending' }">{{ lawyerInfo.pendingCases }}</div>
          <div class="stat-label">待分配案件</div>
        </div>
      </div>
    </div>

    <!-- 状态筛选标签 -->
    <div class="status-tabs">
      <el-radio-group v-model="statusFilter" @change="handleStatusChange">
        <el-radio-button label="all">全部案件 ({{ lawyerInfo.totalCases }})</el-radio-button>
        <el-radio-button label="active">在办案件 ({{ lawyerInfo.activeCases }})</el-radio-button>
        <el-radio-button label="completed">已结案件 ({{ lawyerInfo.completedCases }})</el-radio-button>
        <el-radio-button label="pending">待分配案件 ({{ lawyerInfo.pendingCases }})</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-left">
        <el-input
          v-model="searchQuery"
          placeholder="搜索案件编号、客户姓名..."
          prefix-icon="el-icon-search"
          class="search-input"
          @input="handleSearch"
        />
        
        <el-select v-model="filters.caseType" placeholder="案件类型" class="filter-select">
          <el-option label="全部类型" value="" />
          <el-option label="交通事故" value="traffic" />
          <el-option label="人身损害" value="personal" />
          <el-option label="意外险" value="accident" />
          <el-option label="工伤职伤" value="work" />
        </el-select>

        <el-select v-model="filters.priority" placeholder="优先级" class="filter-select">
          <el-option label="全部优先级" value="" />
          <el-option label="高优先级" value="high" />
          <el-option label="中等优先级" value="medium" />
          <el-option label="低优先级" value="low" />
        </el-select>

        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
          @change="handleDateChange"
        />
      </div>

      <div class="filter-right">
        <el-button @click="resetFilters">
          <i class="fas fa-undo mr-1"></i>重置
        </el-button>
        <el-button type="primary" @click="applyFilters">
          <i class="fas fa-filter mr-1"></i>应用筛选
        </el-button>
      </div>
    </div>

    <!-- 案件列表 -->
    <div class="case-list-container">
      <el-table
        :data="filteredCases"
        stripe
        class="case-table"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column prop="caseNumber" label="案件编号" width="140" sortable>
          <template #default="{ row }">
            <el-button type="text" @click="viewCaseDetail(row)" class="case-number-link">
              {{ row.caseNumber }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="clientName" label="客户姓名" width="120" />

        <el-table-column prop="caseType" label="案件类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getCaseTypeColor(row.caseType)" size="small">
              {{ getCaseTypeText(row.caseType) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="案件状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="priority" label="优先级" width="80">
          <template #default="{ row }">
            <el-tag :type="getPriorityType(row.priority)" size="small">
              {{ getPriorityText(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="progress" label="进度" width="120">
          <template #default="{ row }">
            <div class="progress-bar">
              <el-progress 
                :percentage="row.progress" 
                :color="getProgressColor(row.progress)"
                :stroke-width="8"
                text-inside
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="createDate" label="创建时间" width="120" sortable>
          <template #default="{ row }">
            {{ formatDate(row.createDate) }}
          </template>
        </el-table-column>

        <el-table-column prop="deadline" label="截止时间" width="120" sortable>
          <template #default="{ row }">
            <span :class="{ 'text-red-500': isOverdue(row.deadline) }">
              {{ formatDate(row.deadline) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="lastUpdated" label="最近更新" width="120" sortable>
          <template #default="{ row }">
            {{ formatDateTime(row.lastUpdated) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="text" size="small" @click="viewCaseDetail(row)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
              <el-button type="text" size="small" @click="editCase(row)">
                <i class="fas fa-edit mr-1"></i>编辑
              </el-button>
              <el-dropdown @command="handleMoreAction" trigger="click">
                <el-button type="text" size="small">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{action: 'transfer', case: row}">
                      <i class="fas fa-exchange-alt mr-2"></i>转移案件
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'priority', case: row}">
                      <i class="fas fa-flag mr-2"></i>设置优先级
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'notes', case: row}">
                      <i class="fas fa-sticky-note mr-2"></i>添加备注
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'timeline', case: row}">
                      <i class="fas fa-clock mr-2"></i>时间线
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 批量操作栏 -->
    <div v-if="selectedCases.length > 0" class="batch-actions">
      <div class="batch-info">
        已选择 {{ selectedCases.length }} 个案件
      </div>
      <div class="batch-buttons">
        <el-button @click="batchTransfer">批量转移</el-button>
        <el-button @click="batchSetPriority">批量设置优先级</el-button>
        <el-button @click="batchExport">批量导出</el-button>
        <el-button type="danger" @click="batchArchive">批量归档</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'

export default {
  name: 'LawyerCaseDetail',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 响应式数据
    const loading = ref(false)
    const searchQuery = ref('')
    const statusFilter = ref('all')
    const selectedCases = ref([])

    // 筛选条件
    const filters = reactive({
      caseType: '',
      priority: '',
      dateRange: null
    })

    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0
    })

    // 律师信息
    const lawyerInfo = ref({
      id: null,
      name: '',
      title: '',
      department: '',
      avatar: '',
      practiceYears: 0,
      specialties: [],
      totalCases: 0,
      activeCases: 0,
      completedCases: 0,
      pendingCases: 0
    })

    // 案件数据
    const cases = ref([])

    // 计算属性
    const lawyerName = computed(() => {
      return route.query.lawyerName || lawyerInfo.value.name || '律师'
    })

    // 过滤后的案件列表
    const filteredCases = computed(() => {
      let result = cases.value

      // 状态筛选
      if (statusFilter.value !== 'all') {
        if (statusFilter.value === 'active') {
          result = result.filter(case_ => ['in-progress', 'review'].includes(case_.status))
        } else if (statusFilter.value === 'completed') {
          result = result.filter(case_ => case_.status === 'completed')
        } else if (statusFilter.value === 'pending') {
          result = result.filter(case_ => case_.status === 'pending')
        }
      }

      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(case_ => 
          case_.caseNumber.toLowerCase().includes(query) ||
          case_.clientName.toLowerCase().includes(query)
        )
      }

      // 案件类型筛选
      if (filters.caseType) {
        result = result.filter(case_ => case_.caseType === filters.caseType)
      }

      // 优先级筛选
      if (filters.priority) {
        result = result.filter(case_ => case_.priority === filters.priority)
      }

      // 日期范围筛选
      if (filters.dateRange && filters.dateRange.length === 2) {
        const [startDate, endDate] = filters.dateRange
        result = result.filter(case_ => {
          const caseDate = new Date(case_.createDate)
          return caseDate >= startDate && caseDate <= endDate
        })
      }

      return result
    })

    // 初始化数据
    const initData = () => {
      const lawyerId = route.params.lawyerId
      const status = route.query.status || 'all'
      
      // 模拟律师信息
      lawyerInfo.value = {
        id: lawyerId,
        name: route.query.lawyerName || '李卫民',
        title: '高级律师',
        department: 'senior',
        avatar: '/avatars/lawyer1.jpg',
        practiceYears: 8,
        specialties: ['交通事故', '人身损害', '保险理赔'],
        totalCases: 45,
        activeCases: 12,
        completedCases: 30,
        pendingCases: 3
      }

      // 模拟案件数据
      cases.value = [
        {
          id: 1,
          caseNumber: 'CASE202401001',
          clientName: '张三',
          caseType: 'traffic',
          status: 'in-progress',
          priority: 'high',
          progress: 75,
          createDate: '2024-01-15',
          deadline: '2024-03-15',
          lastUpdated: '2024-02-16 14:30:00'
        },
        {
          id: 2,
          caseNumber: 'CASE202401002',
          clientName: '李四',
          caseType: 'personal',
          status: 'completed',
          priority: 'medium',
          progress: 100,
          createDate: '2024-01-10',
          deadline: '2024-02-28',
          lastUpdated: '2024-02-20 10:15:00'
        },
        {
          id: 3,
          caseNumber: 'CASE202401003',
          clientName: '王五',
          caseType: 'work',
          status: 'pending',
          priority: 'low',
          progress: 0,
          createDate: '2024-02-01',
          deadline: '2024-04-01',
          lastUpdated: '2024-02-01 09:00:00'
        }
      ]

      // 设置初始状态筛选
      statusFilter.value = status
      
      updatePagination()
    }

    // 更新分页信息
    const updatePagination = () => {
      pagination.total = filteredCases.value.length
    }

    // 工具方法
    const getDepartmentClass = (department) => {
      const classMap = {
        lawyer: 'dept-lawyer',
        senior: 'dept-senior', 
        professional: 'dept-professional'
      }
      return classMap[department] || 'dept-default'
    }

    const getDepartmentText = (department) => {
      const textMap = {
        lawyer: '律师部',
        senior: '高级律师组',
        professional: '专业律师组'
      }
      return textMap[department] || '未分配'
    }

    const getCaseTypeColor = (type) => {
      const colorMap = {
        traffic: 'primary',
        personal: 'success',
        accident: 'warning',
        work: 'danger'
      }
      return colorMap[type] || 'info'
    }

    const getCaseTypeText = (type) => {
      const textMap = {
        traffic: '交通事故',
        personal: '人身损害',
        accident: '意外险',
        work: '工伤职伤'
      }
      return textMap[type] || '其他'
    }

    const getStatusType = (status) => {
      const typeMap = {
        pending: 'warning',
        'in-progress': 'primary',
        review: 'info',
        completed: 'success',
        archived: 'info'
      }
      return typeMap[status] || 'info'
    }

    const getStatusText = (status) => {
      const textMap = {
        pending: '待分配',
        'in-progress': '进行中',
        review: '待审核',
        completed: '已完成',
        archived: '已归档'
      }
      return textMap[status] || '未知'
    }

    const getPriorityType = (priority) => {
      const typeMap = {
        low: 'info',
        medium: 'warning',
        high: 'danger'
      }
      return typeMap[priority] || 'info'
    }

    const getPriorityText = (priority) => {
      const textMap = {
        low: '低',
        medium: '中',
        high: '高'
      }
      return textMap[priority] || '普通'
    }

    const getProgressColor = (progress) => {
      if (progress < 30) return '#f56565'
      if (progress < 70) return '#ed8936'
      return '#38a169'
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }

    const formatDateTime = (datetime) => {
      return dayjs(datetime).format('MM-DD HH:mm')
    }

    const isOverdue = (deadline) => {
      return dayjs().isAfter(dayjs(deadline))
    }

    // 事件处理方法
    const goBack = () => {
      router.back()
    }

    const handleStatusChange = (status) => {
      statusFilter.value = status
      pagination.currentPage = 1
      updatePagination()
    }

    const handleSearch = () => {
      pagination.currentPage = 1
      updatePagination()
    }

    const handleDateChange = () => {
      pagination.currentPage = 1
      updatePagination()
    }

    const resetFilters = () => {
      searchQuery.value = ''
      filters.caseType = ''
      filters.priority = ''
      filters.dateRange = null
      pagination.currentPage = 1
      updatePagination()
    }

    const applyFilters = () => {
      pagination.currentPage = 1
      updatePagination()
      ElMessage.success('筛选条件已应用')
    }

    const handleSelectionChange = (selection) => {
      selectedCases.value = selection
    }

    const handleSortChange = ({ prop, order }) => {
      ElMessage.info(`按 ${prop} ${order === 'ascending' ? '升序' : '降序'} 排序`)
    }

    const handleSizeChange = (size) => {
      pagination.pageSize = size
      pagination.currentPage = 1
    }

    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }

    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        initData()
        loading.value = false
        ElMessage.success('数据已刷新')
      }, 1000)
    }

    const exportCases = () => {
      ElMessage.success('案件数据导出功能开发中...')
    }

    const assignNewCase = () => {
      ElMessage.info('分配新案件功能开发中...')
    }

    const viewCaseDetail = (caseData) => {
      ElMessage.info(`查看案件详情: ${caseData.caseNumber}`)
    }

    const editCase = (caseData) => {
      ElMessage.info(`编辑案件: ${caseData.caseNumber}`)
    }

    const handleMoreAction = ({ action, case: caseData }) => {
      switch (action) {
        case 'transfer':
          ElMessage.info(`转移案件: ${caseData.caseNumber}`)
          break
        case 'priority':
          ElMessage.info(`设置优先级: ${caseData.caseNumber}`)
          break
        case 'notes':
          ElMessage.info(`添加备注: ${caseData.caseNumber}`)
          break
        case 'timeline':
          ElMessage.info(`查看时间线: ${caseData.caseNumber}`)
          break
      }
    }

    // 批量操作
    const batchTransfer = () => {
      ElMessage.info(`批量转移 ${selectedCases.value.length} 个案件`)
    }

    const batchSetPriority = () => {
      ElMessage.info(`批量设置 ${selectedCases.value.length} 个案件优先级`)
    }

    const batchExport = () => {
      ElMessage.info(`批量导出 ${selectedCases.value.length} 个案件`)
    }

    const batchArchive = () => {
      ElMessageBox.confirm(
        `确认归档选中的 ${selectedCases.value.length} 个案件吗？`,
        '批量归档',
        { type: 'warning' }
      ).then(() => {
        ElMessage.success('案件已批量归档')
        selectedCases.value = []
      })
    }

    // 监听筛选变化
    watch(filteredCases, () => {
      updatePagination()
    })

    // 生命周期
    onMounted(() => {
      initData()
    })

    return {
      loading,
      searchQuery,
      statusFilter,
      selectedCases,
      filters,
      pagination,
      lawyerInfo,
      cases,
      lawyerName,
      filteredCases,
      getDepartmentClass,
      getDepartmentText,
      getCaseTypeColor,
      getCaseTypeText,
      getStatusType,
      getStatusText,
      getPriorityType,
      getPriorityText,
      getProgressColor,
      formatDate,
      formatDateTime,
      isOverdue,
      goBack,
      handleStatusChange,
      handleSearch,
      handleDateChange,
      resetFilters,
      applyFilters,
      handleSelectionChange,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      exportCases,
      assignNewCase,
      viewCaseDetail,
      editCase,
      handleMoreAction,
      batchTransfer,
      batchSetPriority,
      batchExport,
      batchArchive
    }
  }
}
</script>

<style scoped>
.lawyer-case-detail {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.back-button {
  margin-bottom: 12px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a202c;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.page-description {
  color: #718096;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 律师信息卡片 */
.lawyer-info-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lawyer-basic-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lawyer-avatar {
  flex-shrink: 0;
}

.lawyer-details {
  flex: 1;
}

.lawyer-name {
  font-size: 20px;
  font-weight: bold;
  color: #1a202c;
  margin: 0 0 8px 0;
}

.lawyer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.lawyer-title {
  color: #718096;
  font-size: 14px;
}

.department-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.dept-senior {
  background: #fbb6ce;
  color: #97266d;
}

.dept-professional {
  background: #c6f6d5;
  color: #276749;
}

.dept-lawyer {
  background: #bee3f8;
  color: #2c5aa0;
}

.dept-default {
  background: #e2e8f0;
  color: #4a5568;
}

.lawyer-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  font-size: 12px;
  color: #718096;
}

.case-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  min-width: 320px;
}

.case-stats-grid .stat-item {
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  background: #f7fafc;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.case-stats-grid .stat-item:hover {
  background: #edf2f7;
}

.case-stats-grid .stat-item.active {
  border-color: #3182ce;
  background: #ebf8ff;
}

.case-stats-grid .stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1a202c;
  margin-bottom: 4px;
}

.case-stats-grid .stat-number.active {
  color: #ed8936;
}

.case-stats-grid .stat-number.completed {
  color: #38a169;
}

.case-stats-grid .stat-number.pending {
  color: #e53e3e;
}

.case-stats-grid .stat-label {
  font-size: 12px;
  color: #718096;
}

/* 状态筛选标签 */
.status-tabs {
  margin-bottom: 20px;
}

/* 筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-left {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: center;
}

.search-input {
  width: 250px;
}

.filter-select {
  width: 150px;
}

.date-picker {
  width: 240px;
}

.filter-right {
  display: flex;
  gap: 8px;
}

/* 案件列表 */
.case-list-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.case-table {
  width: 100%;
}

.case-number-link {
  color: #3182ce;
  text-decoration: none;
  font-weight: 500;
}

.case-number-link:hover {
  color: #2c5aa0;
  text-decoration: underline;
}

.progress-bar {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e2e8f0;
}

/* 批量操作栏 */
.batch-actions {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1000;
}

.batch-info {
  color: #718096;
  font-size: 14px;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lawyer-case-detail {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .lawyer-info-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .lawyer-basic-info {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }
  
  .case-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .filter-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-input,
  .filter-select,
  .date-picker {
    width: 100%;
  }
  
  .batch-actions {
    position: relative;
    left: auto;
    transform: none;
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .batch-buttons {
    justify-content: center;
  }
}
</style>
